<template>
  <div class="flow-pass-text-craft">
    <div id="editor-container" class="editor-container"></div>
    <Button class="flow-pass-text-button" @click="textClear">清空</Button>
    <!--    <Button class="flow-pass-text-button" type="primary" @click="textAdd">暂存待办</Button>-->
    <!--    <Button class="flow-pass-text-button" type="primary" @click="textAddFinal">使用草稿</Button>-->
  </div>
</template>

<script>
import E from 'wangeditor';
import {Button} from "ant-design-vue";
import {createModelProps, createProps} from '@/utils';

export default {
  name: "FlowTextCraft",
  model: createModelProps(),
  props: {
    value: createProps(String),
    request: createProps(Object, () => ({
      baseURL: '/h-flow',
      headers: {},
    }))
  },
  components: {
    Button
  },
  mounted() {
    this.$nextTick(() => {
      this.editor = new E('#editor-container');      // 初始化编辑器
      this.editor.config.uploadImgShowBase64 = true; // 允许base64格式的图片
      this.editor.config.uploadFileName = 'file';
      // this.editor.config.uploadImgMaxLength = 100
      this.editor.config.uploadImgServer = this.request.baseURL + '/flow/uploadForWangEditor?attachMentType=comment&baseURL=' + this.request.baseURL;
      this.editor.config.uploadImgHeaders = this.request.headers;
      this.editor.config.uploadImgMaxSize = 1 * 1024 * 1024;   // 配置上传文件的大小限制 ,这里设置为2MB
      this.editor.config.uploadVideoMaxSize = 1024 * 1024 * 5; // 视频大小限制，例如，这里设置为10MB
      this.editor.config.uploadImgAccept = ['png', 'jpeg', 'jpg', 'gif']; // 配置允许上传的文件类型,允许的图片类型
      this.editor.config.uploadVideoAccept = ['mp4', 'avi'];   // 配置上传视频的类型,允许的视频类型
      this.editor.config.menus = this.menus;
      this.editor.config.onchange = value => {
        this.$emit('change', value);
      };
      this.editor.create();
    });
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy();
  }
  ,
  data() {
    return {
      menus: [
        'head',        // 标题
        'bold',        // 加粗
        'fontSize',    // 字号
        'fontName',    // 字体
        'italic',      // 斜体
        'underline',   // 下划线
        'strikeThrough',// 删除线
        'foreColor',   // 文字颜色
        'backColor',   // 背景颜色
        'image',       // 插入图片
        'splitLine',   // 分割线
      ],
      editor: undefined,
    };
  }
  ,
  methods: {
    textClear() {
      this.editor.txt.clear();
    },
    textAdd() {
      const htmlContent = this.editor.txt.html();
      console.log(htmlContent, '------>');
    },
    textAddFinal() {
      const htmlContent = '<p>这是一段HTML内容。</p>';
      this.editor.txt.html(htmlContent);// 将HTML内容渲染到编辑器
    }
  }
};
</script>

<style scoped>
.flow-pass-text-button {
  margin: 5px 5px 0 0;
}
</style>
